import React, { Component } from 'react';
import left from 'assets/images/left.png'
import { CityListWrap } from './styledIndex'
import { get } from 'utils/http'
import BScroll from 'better-scroll'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

const mapState = state => ({
    cityId:state.pages.cityId
})
const mapDispatch = dispatch => ({
    changestate(opts) {
        dispatch({
            type: opts.type,
            data: opts.data
        })
    }
})
@withRouter
@connect(mapState,mapDispatch)
class CityList extends Component {
    
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this)
        this.listClick = this.listClick.bind(this)
        this.cityClick = this.cityClick.bind(this)
        this.state = {
            hotCity: [],
            sortList: [],
            Bscroll: '' 
        }
    }

    async componentDidMount() {
        let result = await get({
            url: '/api/city/city/getHotCityList?version=6.0.9&referer=2'
        })

        let result1 = await get({
            url: '/api/city/city/getSortedCityList?version=6.0.9&referer=2'
        })

        const wrapper = document.querySelector('.wrapper')
        const scroll = new BScroll(wrapper, {
            scrollX: false,
            click: true,
            scrollY: true,
        })
        this.setState({
            hotCity: result.data.hot_city_List,
            sortList: result1.data,
            Bscroll: scroll
        })
    }

    handleClick() {
        this.props.history.push('/index')
    }

    cityClick=(id,name,py)=>()=> {
        console.log(id,name,py)
        this.props.changestate({
            type: 'cityId',
            data: id
        })
        this.props.changestate({
            type: 'cityName',
            data: name
        })
        this.props.changestate({
            type: 'cityPy',
            data: py
        })
        this.props.history.push('/index')
    }

    listClick(e) {
        const clicked = e.target.innerHTML
        console.log(clicked)
        this.state.Bscroll.scrollToElement(`#${clicked}`,1000,null,-40)
    }

    render() {
        return (
            <CityListWrap>
                <header>
                    <img src={left} alt="" onClick={this.handleClick}/>
                    <h3>城市选择</h3>
                </header>
                <div className="wrapper">
                    <div className="content">
                        <div className="main">
                            <span className="dingwei" id="定位">定位城市</span>
                            <ul>
                                <li className="city special">定位失败,点击重试</li>
                            </ul>
                            {
                                this.state.hotCity.length && (
                                    <div>
                                        <span id="热门">热门城市</span>
                                        <ul>
                                            <li className="city1" id="0">全国</li>
                                            {   
                                                // 热门城市
                                                this.state.hotCity.map((value,index) => (
                                                    <li id={value.id} key={index} className="city1" onClick={this.cityClick(value.id, value.name, value.Abbreviation)}>{value.name}</li>
                                                ))
                                            }
                                        </ul>
                                    </div>
                                )
                            }
                            <div className="sort">
                                {
                                    Object.keys(this.state.sortList).map(key => {
                                        return (
                                            <div key={this.state.sortList[key].id} className="content">
                                                <span className="py" id={this.state.sortList[key].id}>{this.state.sortList[key].id}</span>
                                                <ul>
                                                    {
                                                        this.state.sortList[key].list.map((value,index) => (
                                                            <li id={value.id} key={index} className="sortcity" onClick={this.cityClick(value.id, value.name, value.Abbreviation)}>{value.name}</li>
                                                        ))
                                                    }
                                                </ul>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>
                <div className="city-nav">
                    <span className="nav" onClick={this.listClick}>定位</span>
                    <span className="nav" onClick={this.listClick}>热门</span>
                    {
                        Object.keys(this.state.sortList).map(key => {
                            return (
                                <>
                                {/* 字母 */}
                                    <span className="nav" onClick={this.listClick} key={this.state.sortList[key].id}>{this.state.sortList[key].id}</span>
                                </>
                            )
                        })
                    }
                    
                </div>
            </CityListWrap>
        );
    }
}

export default CityList;